<script setup>
import {ref,defineProps} from "vue";
import request  from '@/api/request'
let emits=defineEmits(["ref-table"])
let onSubmit=()=>{
     request({
        url: '/classify/insert',
        method: 'post',
        data: {
            ...classify.value
        }
    }).then(res => {
        emits("ref-table")
    })
}
let props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  }
});



// 表单数据
let classify = ref({
    ...props.data
});
classify.value.parentsName=classify.value.classifyName;
classify.value.classifyName=""



let num1 = ref(1)
let num2 = ref(5000)
const handleChange1 = (value=number) => {

}
const handleChange2 = (value=number) => {

}
</script>
<template>
    <div>
        <el-card>
            <template #header>
                <el-form :model="classify" ref="form"  label-width="80px" class="card_wrap">
                             <el-form-item label="父分类" class="c_item_big">
                            
                            <el-input v-model="classify.parentsName" style="width: 800px;"disabled></el-input>
                            </el-form-item>
                           <el-form-item label="分类名称" class="c_item">
                           
                            <el-input v-model="classify.classifyName" style="width: 150px;"></el-input>
                     </el-form-item>
                            <el-form-item  label="显示排序">
                                
                                <el-input-number v-model="classify.sort" :min="1" :max="2000"@change="handleChange1" />
                            </el-form-item>
                            <el-form-item label="物料/产品" class="c_item">
                            
                            <el-radio-group v-model="classify.materialOrProduct">
                                <el-radio value="0" size="large">物料</el-radio>
                                <el-radio value="1" size="large">产品</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="是否启用" class="c_item">
                                
                                <el-radio-group v-model="classify.isEnabled">
                                <el-radio value="0" size="large">是</el-radio>
                                <el-radio value="1" size="large">否</el-radio>
                                </el-radio-group>
                            </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">立即添加</el-button>
                    </el-form-item>
                </el-form>
            </template>
        </el-card>
        <router-view/>
    </div>
</template>
<style scoped>
.c_item {
    flex: 1;
    margin: 0px 5px 15px 0;
    width: calc((100%-10px)/2);
    min-width: calc((100% - 10px)/2);
    max-width: calc((100% - 10px)/2);

    &:nth-child(3n) {
        margin-right: 0;
    }
}
.c_item_big {
    flex: 2;
    margin: 0px 5px 15px 0;
    width: calc((100%-10px)/1);
    min-width: calc((100% - 10px)/1);
    max-width: calc((100% - 10px)/1);

    &:nth-child(3n) {
        margin-right: 0;
    }
}
.card_wrap {
    width: 98%;
    
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}
</style>